<template>
  <div class="banner">
    <el-col :span="24" class="action-bar">
      <!-- <span style="color:#888888;">轮播图管理:</span> -->
      <el-select style="margin-left: 10px" @clear="merchantSelectClear" @change="merchantChange" clearable v-model="merchantId" placeholder="所属门店">
        <el-option v-for="item in merchantList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>
      <el-button type="primary" size="medium" @click="addBtnReset" style="margin: 0 20px;">新增</el-button>
    </el-col>

    <!--列表-->
    <el-table stripe :data="bannerList"v-loading="tableLoadingShow"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              style="width: 100%"
              element-loading-text="加载中" highlight-current-row class="el-table-style">
      <!--<el-table-column type="selection" min-width="55">
      </el-table-column>-->
      <el-table-column prop="id" label="序号" min-width="60">
      </el-table-column>
      <el-table-column label="图片" min-width="100">
        <template slot-scope="scope">
          <img :src="scope.row.img_url" style="object-fit:contain" width="80" height="80"/>
        </template>
      </el-table-column>
      <el-table-column prop="merchant_name" width="200" style="text-align: center" label="门店" min-width="100"></el-table-column>
      <!--<el-table-column prop="desc" width="200" style="text-align: center" label="描述" min-width="100"></el-table-column>-->
<!--
      <el-table-column prop="merchant_name" width="200" style="text-align: center" label="所属门店" min-width="100" sortable></el-table-column>
-->
      <!--<el-table-column prop="sort" label="排序" min-width="100" sortable>
      </el-table-column>-->
      <el-table-column label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="getAdImageDetail(scope.row)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delAdImage(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <!-- <div class="batch"><el-button size="medium ">批量删除</el-button></div> -->
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="limit"
          :current-page="page"
          @current-change="totalPageChange"
        >
        </el-pagination>
      </div>
    </el-col>

    <!-- 新增 -->
    <el-dialog :title="addForm.id?'修改领券中心':'添加领券中心'" :visible.sync="addFormVisible" width="40%">
      <el-form label-width="80px">
        <el-form-item label="门店">
          <el-select v-model="addForm.merchant_id" placeholder="选择门店">
            <el-option v-for="opt in merchantList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            name="photo"
            :action="$api.UPLOAD_IMG"
            :show-file-list="false"
            :on-success="addUploadSuccess"
          >
            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" style="object-fit:contain" class="avatar">
            <div v-else style="display: flex;align-items: center;flex-direction: column;font-size: 11px;color: grey;line-height: 15px;padding-bottom: 10px" >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span>宽高比例不受限制</span>
              <span>文件大小<2Mb</span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addCancelBtn">取消</el-button>
        <el-button type="primary" @click="addSubmitBtn">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        merchantId: '',
        tableLoadingShow: false,
        addFormVisible: false,//新增界面是否显示
        editFormVisible: false,//编辑界面是否显示
        addImageUrl:'',
        pageTotal:0,
        page: 1,
        limit:6,
        classify_first_id: '',
        classify_second_id: '',
        //新增界面数据
        addForm: {
          merchant_id: '',
          id: '',
          location: '',
          desc: '',
          link: '/',
          img_id: '',
          sort: '0',
          start_time: '',
          end_time: '',
          status: 1,
          imgUrl: ''
        },
        //编辑界面数据
        /*editForm: {
          merchant_id: '',
          classify_id: '',
          id:'',
          title: '',
          imgId:'',
          linkUrl:'',
          imgUrl:'',
          sort: '',
        },*/
        bannerList:[],
        merchant: '',
        merchantList: [],
        classifyList: [],
        classifyListSecond: [],
        radioFlag: 1,
        locationSearch: ''
      }
    },
    mounted(){
      this.getAdImageList()
      this.getUserInfo();
      this.getMerchantScreenList()

    },
    watch: {
      'locationSearch': function (newVal,oldVal) {
          if(newVal){
            this.getAdImageList()
          }
      }

    },
    methods:{
      // 复制成功
      onCopy(e){
        this.$message({
          type:'success',
          message:'复制成功'
        })
      },

      // 复制失败
      onError(err){
        this.$message({
          type:'error',
          message:'复制失败'
        })
      },

      //新增上传图片成功回调
      addUploadSuccess(res, file) {
        if(res.data){
          this.addForm.imgUrl = res.data.img_url;
          this.addForm.imgId = res.data.id;
        }
      },

      //编辑上传图片成功回调
      /*editUploadSuccess(res, file) {
        if(res.data){
          this.editForm.imgUrl = res.data.img_url;
          this.editForm.imgId = res.data.id;
        }
      },*/

      //新增取消按钮
      addCancelBtn(){
        this.addForm.img = "";
        this.addForm.sort = "";
        this.addFormVisible = false;
        this.radioFlag = 1
      },

      //编辑取消按钮
      /*editCancelBtn(){
        this.editForm.id = "";
        this.editForm.title = "";
        this.editForm.img = "";
        this.editForm.sort = "";
        this.editFormVisible = false;
        this.editForm.imgUrl = '';
      },*/

      //新增按钮重置表单
      addBtnReset(){
        this.merchant_id = ''
        this.addForm.merchant_id = ''
        this.addForm.id = ''
        this.addForm.location = 't1'
        this.addForm.desc = ''
        this.addForm.link = '/'
        this.addForm.img_id = ''
        this.addForm.imgUrl = ''
        this.addForm.sort = '0'
        this.addForm.start_time = ''
        this.addForm.end_time = ''
        this.addForm.status = 1
        this.addFormVisible = true
      },

      //获取门店列表
      async getMerchantScreenList(){
        let params = {
          limit:999,
          page:1
        }
        const res = await this.$api.getMerchantScreenList(params);
        if(res.data.level==='success'){
          this.merchantList = res.data.data;
        }
      },

      //获取门店的分类
      async getGoodsClassifyList(id,pid){
        if(!id){
          this.classifyList = []
          return ;
        }
        // this.page = this.page
        let params = {
          limit:999,
          page:1,
          merchant_id: id,
          pid: pid
        }
        const res = await this.$api.getGoodsClassifyList(params);
        if(res.data.level==='success'){
          let list = res.data.data;
          let tempObj = {
            name: '不选择',
            id: 0
          }
          if(pid){
            /*list.unshift(tempObj)*/
            this.classifyListSecond = list;
          } else{
            list.unshift(tempObj)
            this.classifyList = list;
          }
        }else{
          this.$message.warning(res.data.message);
        }
      },

      //编辑获取功能按钮信息
      async getAdImageDetail(item){
        console.log('item',item)
        this.addFormVisible = true
        this.addForm.id = item.id;
        this.addForm.desc = item.desc;
        this.addForm.merchant_id = parseInt(item.merchant_id);
        this.addForm.imgUrl = item.img_url;
        this.addForm.link = item.link;
        this.addForm.imgId = item.img_id;
        this.addForm.sort = item.sort;
        this.addForm.location = item.location
        this.addForm.link ? this.radioFlag = 2 : this.radioFlag = 1
      },

      //新增提交按钮
      async addSubmitBtn(){
        const params = {
          merchant_id:  this.addForm.merchant_id,
          id: this.addForm.id,
          location: 't1',
          desc: this.addForm.desc,
          link: this.addForm.link,
          img_id: this.addForm.imgId,
          sort: this.addForm.sort,
          start_time: this.addForm.start_time,
          end_time: this.addForm.end_time,
          status: '1',
        }
        const res = await this.$api.setAdImage(params);
        if(res.data.level==='success') {
          await this.getAdImageList()
          this.addCancelBtn();
          this.$message.success("修改成功");
        } else {
          this.$message.error(res.data.message);
        }
      },

      // 获取广告图列表
      async getAdImageList() {
        this.tableLoadingShow = true;
        const params = {
          page: this.page,
          limit: this.limit,
          merchant_id: this.merchantId,
          location: ['t1']
          /*status: "1"*/
        }
        const res = await this.$api.getAdImageList(params);
        if (res.data.level==='success') {
          this.bannerList = res.data.data;
          this.pageTotal = res.data.page_info.total
        }else {
          this.$message.error(res.data.message)
        }
        this.tableLoadingShow = false;
      },

      //删除广告
      async delAdImage(id){
        const judge= this.$confirm('删除该项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await this.$api.delAdImage({id})
          if(res.data.level==='success'){
            await this.getAdImageList();
            this.$message.success(res.data.message);
          }else{
            this.$message.error(res.data.message);
          }
        });
      },

      async getUserInfo() {
        const res = await this.$api.getMerchantUserInfo();
        if (res.data.level === 'success') {
          this.merchant = res.data.data
          await this.getAdImageList();
        } else {
          this.$message(res.data.message);
        }
      },

      openWxUrl() {
        open('https://mp.weixin.qq.com/')
      },

      //获取门店的分类
      /*async getGoodsClassifyList(id){
        if(!id){
          this.classifyList = []
          return ;
        }
        this.page = this.page
        let params = {
          limit:99,
          page:1,
          merchant_id: id
        }
        const res = await this.$api.getGoodsClassifyList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.classifyList = list;
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },*/

      //下拉框选择事件
      merchantSelectClear() {
        this.page = 1
        this.getAdImageList();
      },

      // 监听顶部门店select器的值
      merchantChange(e) {
        this.addForm.merchant_id = e
        this.page = 1
        this.getAdImageList();
      },

      locationChange(e) {
        this.page = 1
        this.getAdImageList();
      },

      // 分页
      totalPageChange(e) {
        this.page = e;
        this.getAdImageList()
      },

      firstClassifySelectClear() {
        this.classify_first_id = ''
        this.classify_second_id = ''
        this.classifyListSecond = []
      },

      secondClassifySelectClear() {
        this.classify_second_id = ''
      }

    }
  }
</script>
<style lang='scss' scoped>
  .tip{
    p{
      font-size: 14px;
      padding: 0;
      margin: 0;
      line-height: 30px;
    }
  }
  .banner{
    padding: 10px 30px;
    .action-bar{
      background-color: #f2f2f2;
      height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .action-bar-input{
        width: 250px;
        margin-right: 14px;
      }
    }
    .el-table-style{
      width: 100%;
      border: 1px solid #f2f2f2;
    }
    .footer-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
    }
    .dialog-footer{
      text-align: center;
    }
  }
</style>

<style>
  .el-pagination.is-background .el-pager li,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next
  {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    margin: 0;
  }
  .member .el-dialog__body{overflow: auto;}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
</style>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 108px;
    line-height: 138px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    /*height: 178px;*/
    display: block;
  }
</style>
